<template>
  <el-card class="box-card">
    <div>入库</div>
    <el-divider></el-divider>
   <div class="form">
      <el-form  class="demo-ruleForm" label-width="220px" :rules="rules" ref="onPutInRuleForm" :model="inStorehouse">
        <el-form-item label="订单编号:" prop="receivingId" >
          <el-select v-model="inStorehouse.receivingId" placeholder="请选择" clearable @change="getOptions">
            <el-option
              v-for="item in queryInfo.receivingIdList"
              :key="item"
              :label="item"
              :value="item"
              >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="货位编号:" prop="locationId">
            <el-select v-model="inStorehouse.locationId" placeholder="请选择入库区货位" clearable @change="getOptions">
              <el-option
                v-for="item in queryInfo.locationIdList"
                :key="item"
                :label="item"
                :value="item"
                >
              </el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="备注:" prop="remarks">
          <el-input
            type="textarea"
            autosize
            placeholder="请输入备注"
            v-model="inStorehouse.remarks">
          </el-input>
        </el-form-item>

      </el-form>
      <el-button type="primary" icon="el-icon-plus" class="btm" @click="addInStorehouse">入库</el-button>

    </div>
  </el-card>
</template>

<script>
export default {
  data () {
    return {
      user: '',
      queryInfo: {
        receivingIdList: '',
        locationIdList: ''
      },
      inStorehouse: {
        inStorehouseId: '',
        receivingId: '',
        locationId: '',
        remarks: '',
        createPerson: '',
        checkPerson: '',
        status: ''
      },
      rules: {
        receivingId: [
          { required: true, message: '请输入条码', trigger: 'blur' }
        ],
        locationId: [
          { required: true, message: '请输入源货位编码', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    async getOptions () {
      const { data: result } = await this.$http.get('/putIn/getQuery', { params: this.inStorehouse })
      // if(result.status === 201) return this.$message.error("获取采购订单失败")
      this.queryInfo.receivingIdList = result.data.receivingIdList
      this.queryInfo.locationIdList = result.data.locationIdList
      if (result.data.locationIdList.length === 0 & this.inStorehouse.receivingId.length !== 0) return this.$message.error('没有对应出库中的入库区货位')
    },

    addInStorehouse () {
      this.$refs.onPutInRuleForm.validate(async validate => {
        if (!validate) return this.$message.error('请输入必填项')
        this.inStorehouse.status = '待审核'
        this.inStorehouse.createPerson = this.user
        const now = new Date()
        this.inStorehouse.inStorehouseId = 'IN' + now.getTime()
        const { data: result } = await this.$http.post('/putIn/addInStorehouse', this.inStorehouse)
        if (result.status === 201) return this.$message.error('入库失败')
        this.$message.success(result.data)
        this.$refs.onPutInRuleForm.resetFields()
      })
    }

  },
  mounted () {
    this.getOptions()
    this.user = window.sessionStorage.getItem('token').substr(32)
  }
}
</script>

<style>
  .box-card{
    height: 95%;
    width: 95%;

  }
  .form{
    position: absolute;
    top: 40%;
    left: 35%;
    /* right: 20%; */
  }
  .btm{
    /* align-items: center; */
    position: absolute;
    left: 60%;
  }
</style>
